import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';

main() =>
    runApp(MaterialApp(debugShowCheckedModeBanner: false, home: HomePage()));

var lightGrey = Color(0xFF414350);
var lightBlue = Color(0xFF5157c2);
var bgColor = Color(0xff32323e);
var bedRoomPic = 'http://i2.bvimg.com/688304/26adec56c62c028d.jpg';
var avatarUrl =
    'https://mmbiz.qpic.cn/mmbiz_jpg/QDjfqWiaibp8rnTMd7MCBJeNf4fZ9PTFL1Fg2ibnetQXzdYdw7e3mAL7lAfJTP4GxLBePKXZ4sodkibBWkGOKW5iacg/640?wx_fmt=jpeg';

class HomePage extends StatefulWidget {
  @override
  createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  build(context) => Scaffold(
        backgroundColor: bgColor,
        body: Container(
          margin: EdgeInsets.symmetric(horizontal: 16.0),
          child: Column(
            children: [
              SizedBox(height: 48.0),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Row(
                    children: [
                      Icon(CupertinoIcons.back,
                          color: Colors.white, size: 32.0),
                      SizedBox(width: 16.0),
                      Text('卧室',
                          style: TextStyle(color: Colors.white, fontSize: 32.0))
                    ],
                  ),
                  Text('编辑',
                      style: TextStyle(color: Colors.grey, fontSize: 20.0))
                ],
              ),
              SizedBox(height: 24.0),
              Container(
                child: Image.network(bedRoomPic,
                    fit: BoxFit.cover, height: 200.0, width: double.infinity),
              ),
              Expanded(
                child: GridView.count(
                  physics: BouncingScrollPhysics(),
                  crossAxisCount: 2,
                  childAspectRatio: 2 / 1,
                  crossAxisSpacing: 8.0,
                  mainAxisSpacing: 8.0,
                  children: [
                    ItemCard(
                      name: '家庭管家',
                      color: lightGrey,
                      type: '00:23',
                      progress: 160.0,
                      colors: [Colors.black26, Colors.white],
                    ),
                    ItemCard(
                      name: '厨房灯',
                      icon: FontAwesomeIcons.lightbulb,
                      color: lightBlue,
                      type: '72%',
                      progress: 160.0,
                      colors: [Colors.black26, Colors.white],
                    ),
                    ItemCard(
                      name: '需要水',
                      icon: FontAwesomeIcons.water,
                      color: lightGrey,
                      type: '涡流',
                      progress: 0.0,
                      colors: [lightBlue, Colors.purple],
                    ),
                    ItemCard(
                      name: '当前电源',
                      icon: FontAwesomeIcons.powerOff,
                      color: lightGrey,
                      type: '1.2 kW',
                      progress: 0.0,
                      colors: [lightBlue, Colors.purple],
                    ),
                    ItemCard(
                      name: '抽油烟机',
                      icon: FontAwesomeIcons.elementor,
                      color: lightGrey,
                      type: '运行中',
                      progress: 160.0,
                      colors: [lightBlue, Colors.purple],
                    ),
                    ItemCard(
                      name: '需要水',
                      icon: FontAwesomeIcons.water,
                      color: lightGrey,
                      type: '涡流',
                      progress: 30.0,
                      colors: [lightBlue, Colors.purple],
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      );
}

class ItemCard extends StatelessWidget {
  ItemCard({
    this.name,
    this.icon,
    this.color,
    this.type,
    this.progress,
    this.colors,
  });
  final name;
  final icon;
  final color;
  final type;
  final progress;
  final colors;
  @override
  build(context) => Container(
        color: color,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Padding(
              padding: EdgeInsets.all(14.0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Row(
                    children: [
                      icon == null
                          ? Container(
                              width: 30.0,
                              height: 30.0,
                              decoration: BoxDecoration(
                                  image: DecorationImage(
                                    fit: BoxFit.cover,
                                    image: NetworkImage(avatarUrl),
                                  ),
                                  borderRadius: BorderRadius.circular(8.0)),
                              child: Center(
                                  child:
                                      Icon(Icons.pause, color: Colors.white)),
                            )
                          : Icon(icon, color: Colors.white, size: 8.0),
                      SizedBox(width: 16.0),
                      Text(type,
                          style: TextStyle(color: Colors.white, fontSize: 20.0))
                    ],
                  ),
                  SizedBox(height: 13.0),
                  Text(name,
                      style: TextStyle(
                          color: Colors.white,
                          letterSpacing: 1.2,
                          fontSize: 16.0)),
                ],
              ),
            ),
            Spacer(),
            Container(
              height: 4.0,
              width: progress,
              decoration: BoxDecoration(
                  gradient: LinearGradient(
                      colors: colors,
                      begin: Alignment.centerLeft,
                      end: Alignment.centerRight)),
            )
          ],
        ),
      );
}
